import React, { useState, useEffect } from 'react'
import _ from 'lodash'
import { connect } from 'react-redux'
import { Dispatch, bindActionCreators } from 'redux'
import { RootState } from 'src/redux'
//ui
import { Input, Button, Row, Col, Checkbox, Card } from 'antd';
import { Gutter } from "antd/lib/grid/row";
import { UserOutlined } from '@ant-design/icons';
//comp
import WordTagSelect from '../WordTagSelect'
//ds
import { WordSearcherState, WordConditionDto } from './reducer'
//state
import { WordTagSelectState } from "../WordTagSelect/reducer";
import { MainInfoState } from '../MainInfo/reducer'
import { WordSourceState } from '../WordSource/reducer'
//action
import * as WordSearchAction from './reducer'
import * as WordListAction from '../WordList/reducer'
import * as WordTagListAction from '../WordTagSelect/reducer'
import * as WordTagAction from '../WordTag/reducer'

export interface WordSearcherProps {
    setState: typeof WordSearchAction.setState;
    fetch: typeof WordTagListAction.fetch;
    addWord: typeof WordListAction.add;
    addTag: typeof WordTagAction.addTag
    state: WordSearcherState;
    wordTagListState: WordTagSelectState;
    mainInfoState: MainInfoState
    wordSourceState: WordSourceState
}

export const _WordSearcher: React.SFC<WordSearcherProps> = props => {
    const {
        wordTagListState, mainInfoState, wordSourceState,
        addWord, fetch, setState, addTag
    } = props;

    // const rowGutter: [Gutter, Gutter] = [0, { xs: 8, sm: 16, md: 24, lg: 32 }];
    const rowGutter: [Gutter, Gutter] = [0, 8];

    const [subSourceDisable, setSubSourceDisable] = useState(true);
    const [innerState, setInnerState] = useState<WordConditionDto>({
        relation: false,
        source: false,
        subSource: false,
        wordSourceId: 0,
        wordTagValue: "默认",
        wordValue: "",
        tag: true,
    })

    useEffect(() => {
        fetch();
    }, [fetch]);

    const add = () => {
        addWord({
            wordConditionDto: {
                ...innerState,
                wordValue: innerState.wordValue?.trim(),
                wordTagValue: wordTagListState.currentTagValue
            }
        })
        if (innerState.wordValue === mainInfoState.word && innerState.wordTagValue) {
            addTag(innerState.wordTagValue)
        }
    }

    const search = () => {
        let wordSourceId = _.parseInt(wordSourceState.dto.key.toString().substring(1));
        //来源为空自动设成根节点
        if (!_.isNull(mainInfoState.wordSourceId))
            wordSourceId = mainInfoState.wordSourceId
        setState({
            wordConditionDto: {
                ...innerState,
                wordSourceId,
                wordValue: innerState.wordValue?.trim(),
                wordTagValue: wordTagListState.currentTagValue
            }
        })
    }

    return (
        <Card title='控制台'>
            <Row gutter={rowGutter}>
                <Col span={24}>
                    <Input
                        value={innerState.wordValue}
                        onChange={e => setInnerState({ ...innerState, wordValue: e.target.value })}
                        prefix={<UserOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
                        placeholder='输入单词' />
                </Col>
            </Row>
            <Row gutter={rowGutter}>
                <Col span={24}>
                    <WordTagSelect />
                </Col>
            </Row>
            <Row gutter={rowGutter}>
                <Col span={8}>
                    <Button onClick={add} style={{ width: "100%" }}>插入</Button>
                </Col>

                <Col span={8}>
                </Col>
                <Col span={8} >
                    <Button onClick={search} style={{ width: "100%" }}>搜索</Button>
                </Col>
            </Row>
            <Row>
                <Col span={8}>
                    <p style={{ textAlign: 'center' }}>
                        <Checkbox checked={innerState.relation} onChange={(e) => setInnerState({ ...innerState, relation: e.target.checked })}>关联</Checkbox>
                    </p>
                </Col>
                <Col span={8}>
                    <p style={{ textAlign: 'center' }}>
                        <Checkbox checked={innerState.source} onChange={(e) => {
                            const source = e.target.checked
                            if (source) {
                                setSubSourceDisable(false)
                            }
                            else {
                                setSubSourceDisable(true)
                            }
                            setInnerState({ ...innerState, source })

                        }}>来源</Checkbox>
                    </p>
                </Col>
                <Col span={8}>
                    <p style={{ textAlign: 'center' }}>
                        <Checkbox disabled={subSourceDisable} checked={innerState.subSource} onChange={(e) => setInnerState({ ...innerState, subSource: e.target.checked })}>子来源</Checkbox>
                    </p>
                </Col>
            </Row>
            <Row>
                <Col span={8}>
                    <p style={{ textAlign: 'center' }}>
                        <Checkbox checked={innerState.tag} onChange={(e) => setInnerState({ ...innerState, tag: e.target.checked })}>标签</Checkbox>
                    </p>
                </Col>
                <Col span={8}>

                </Col>
                <Col span={8}>

                </Col>
            </Row>
        </Card >
    )
}

//把状态中心的状态取回
const mapStateToProps = (state: RootState) => ({
    state: state.WordSearcherState,
    wordTagListState: state.WordTagSelectState,
    mainInfoState: state.MainInfoState,
    wordSourceState: state.WordSourceState,

})

const mapDispatchToProps = (dispatch: Dispatch) =>
    bindActionCreators({
        setState: WordSearchAction.setState,
        addWord: WordListAction.add,
        fetch: WordTagListAction.fetch,
        addTag: WordTagAction.addTag,
    }, dispatch)

/**
 * 得到当前过滤器并渲染 Link。
 */
const WordSearcher = connect(
    mapStateToProps,
    mapDispatchToProps
)(_WordSearcher)

export default WordSearcher